<template>
  <div>
    <el-form
        :inline="true"
        :model="ruleForm"
        class="advanced-form"
        label-position="right"
    >
      <el-row :gutter="20" class="form-row">
        <!-- 第一行 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="姓名" class="form-item">
            <el-input
                v-model="ruleForm.ownerName"
                placeholder="请输入真实姓名"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="" class="form-item">
            <el-input
                v-model="ruleForm.areaMin"
                placeholder="请输入最小面积"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
              <template #append>亩</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="" class="form-item">
            <el-input
                v-model="ruleForm.areaMax"
                placeholder="请输入最大面积"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
              <template #append>亩</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="用途" class="form-item">
            <el-input
                v-model="ruleForm.used"
                placeholder="请输入土地用途"
                clearable
                class="form-input"
            />
          </el-form-item>
        </el-col>
      </el-row>


      <!-- 操作按钮（单独一行） -->
      <el-row>
        <el-col :span="24" class="form-actions">
          <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
          <el-button
              type="success"
              @click="onAdd"
              icon="el-icon-plus"
              plain
          >新增</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!--  列表页  -->
    <el-table :data="tableData"
              style="width: 100%"
              :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
              stripe
              border>
      <el-table-column prop="ownerName" label="管理者" width="180" align="center" ></el-table-column>
      <el-table-column prop="ownerPhone" label="手机号" width="180" align="center" ></el-table-column>
      <el-table-column prop="area" label="土地面积" width="180" align="center" />
      <el-table-column prop="used" label="利用状况" width="220" align="center" >
        <template slot-scope="scope">
          {{ scope.row.used || '未填写' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="toUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="toDel(scope.row.landId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--    页脚-->
    <el-pagination
        background
        :page-size="pageSize"
        :current-page="pageNum"
        :page-count="pages"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePageNum"
    >
    </el-pagination>

    <!--    弹窗，实现新增信息-->
    <el-dialog
        title="新增土地信息"
        :visible.sync="addDialog"
        width="680px"
        :close-on-click-modal="false"
        class="land-dialog"
    >
<!--      新增表单-->
      <el-form
          :model="landForm"
          :rules="rules"
          ref="landForm"
          label-width="100px"
          label-position="top"
          class="compact-form"
      >
        <el-row :gutter="20">
          <!-- 第一列 -->
          <el-col :span="12">
            <!-- 基本信息 -->
            <div class="form-section">
              <h4 class="section-title">基本信息</h4>

              <el-form-item label="土地面积（亩）" prop="area">
                <el-input-number
                    v-model="landForm.area"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    controls-position="right"
                    style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="使用用途" prop="used">
                <el-input
                    v-model="landForm.used"
                    placeholder="例如：种植小麦"
                    clearable
                />
              </el-form-item>

              <el-form-item label="开始日期" prop="startUsageDate">
                <el-date-picker
                    v-model="landForm.startUsageDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期" prop="endUsageDate">
                <el-date-picker
                    v-model="landForm.endUsageDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <!-- 第二列 -->
          <el-col :span="12">
            <!-- 地理信息 -->
            <div class="form-section">
              <h4 class="section-title">地理信息</h4>

              <el-form-item label="土壤类型" prop="soilType">
                <el-select
                    v-model="landForm.soilType"
                    placeholder="请选择土壤类型"
                    clearable
                    style="width: 100%"
                >
                  <el-option label="砂土" value="sandy" />
                  <el-option label="壤土" value="loam" />
                  <el-option label="黏土" value="clay" />
                </el-select>
              </el-form-item>

              <el-form-item label="地理位置" prop="location">
                <el-input
                    v-model="landForm.location"
                    placeholder="请输入详细地址"
                    type="textarea"
                    :rows="2"
                />
              </el-form-item>

              <el-form-item label="气候条件" prop="climateCondition">
                <el-input
                    v-model="landForm.climateCondition"
                    placeholder="例如：温带季风气候"
                    clearable
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <!-- 灌溉条件 -->
        <div class="form-section full-width">
          <h4 class="section-title">灌溉条件</h4>
          <el-form-item prop="irrigationCondition">
            <el-input
                v-model="landForm.irrigationCondition"
                type="textarea"
                :rows="3"
                placeholder="请输入灌溉设施详情，例如：自动喷灌系统，每日供水2次"
            />
          </el-form-item>
        </div>
      </el-form>

<!--      新增按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('landForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--    弹窗，实现修改信息-->
    <el-dialog
        title="修改土地信息"
        :visible.sync="updateDialog"
        width="680px"
        :close-on-click-modal="false"
        class="land-dialog"
    >
      <!--      修改表单-->
      <el-form
          :model="landForm"
          :rules="rules"
          ref="landForm"
          label-width="100px"
          label-position="top"
          class="compact-form"
      >
        <el-row :gutter="20">
          <!-- 第一列 -->
          <el-col :span="12">
            <!-- 基本信息 -->
            <div class="form-section">
              <h4 class="section-title">基本信息</h4>

              <el-form-item label="土地面积（亩）" prop="area">
                <el-input-number
                    v-model="landForm.area"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    controls-position="right"
                    style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="使用用途" prop="used">
                <el-input
                    v-model="landForm.used"
                    placeholder="例如：种植小麦"
                    clearable
                />
              </el-form-item>

              <el-form-item label="开始日期" prop="startUsageDate">
                <el-date-picker
                    v-model="landForm.startUsageDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期" prop="endUsageDate">
                <el-date-picker
                    v-model="landForm.endUsageDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <!-- 第二列 -->
          <el-col :span="12">
            <!-- 地理信息 -->
            <div class="form-section">
              <h4 class="section-title">地理信息</h4>

              <el-form-item label="土壤类型" prop="soilType">
                <el-select
                    v-model="landForm.soilType"
                    placeholder="请选择土壤类型"
                    clearable
                    style="width: 100%"
                >
                  <el-option label="砂土" value="sandy" />
                  <el-option label="壤土" value="loam" />
                  <el-option label="黏土" value="clay" />
                </el-select>
              </el-form-item>

              <el-form-item label="地理位置" prop="location">
                <el-input
                    v-model="landForm.location"
                    placeholder="请输入详细地址"
                    type="textarea"
                    :rows="2"
                />
              </el-form-item>

              <el-form-item label="气候条件" prop="climateCondition">
                <el-input
                    v-model="landForm.climateCondition"
                    placeholder="例如：温带季风气候"
                    clearable
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <!-- 灌溉条件 -->
        <div class="form-section full-width">
          <h4 class="section-title">灌溉条件</h4>
          <el-form-item prop="irrigationCondition">
            <el-input
                v-model="landForm.irrigationCondition"
                type="textarea"
                :rows="3"
                placeholder="请输入灌溉设施详情，例如：自动喷灌系统，每日供水2次"
            />
          </el-form-item>
        </div>
      </el-form>

      <!--      修改按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateForm('landForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {deleteLandApi, getLandPage, saveLandApi, updateLandApi} from "@/api/land";


export default {
  name:"LandInfo",
  data(){
    return{
      //土地列表数据
      tableData: [],
      //页数转换相关
      pages: 0,
      total: 1,
      pageNum: 1,
      pageSize:6,
      //筛选信息
      ruleForm: {
        ownerName:"",
        areaMin:"",
        areaMax:"",
        used:""
      },
      //弹窗 默认值
      addDialog: false,
      updateDialog:false,
      //表单
      landForm:{
        ownerId:"",
        area:"",
        used:"",
        startUsageDate:"",
        endUsageDate:"",
        soilType:"",
        location:"",
        climateCondition:"",
        irrigationCondition:""
      },
      //规则
      rules: {
        area: [
          { required: true, message: '请输入土地面积', trigger: 'blur' },
          { type: 'number', min: 0.1, message: '面积需大于0' }
        ],
        used: [
          { required: true, message: '请输入土地用途', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在2到20个字符' }
        ],
        soilType: [
          { required: true, message: '请选择土壤类型', trigger: 'change' }
        ],
        location: [
          { required: true, message: '请输入地理位置', trigger: 'blur' }
        ],
        startUsageDate:[
          { required: true, message: '请输选择开始时间', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    //获取删除id
    toDel(id) {
      this.$confirm(`确定删除此条信息吗？`, '提示', {
        type: 'danger'
      }).then(() => {
        // 这里调用API更新状态
        deleteLandApi(id)
        this.getPage()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    //打开修改弹窗
    toUpdate(row){
      this.updateDialog = true
      this.landForm = row
    },

    //修改函数
    updateForm(landForm){
      //判断
      this.$refs[landForm].validate((valid) => {
        if(valid){
          updateLandApi(this.landForm).then(()=>{
            this.getPage()
            this.updateDialog = false
          })
        }
      });
      this.landForm = {}
    },

    //打开添加弹窗
    onAdd() {
      this.landForm = {}
      this.addDialog = true
    },

    //添加函数
    submitForm(landForm){
      //判断函数
      this.$refs[landForm].validate((valid) => {
        if(valid){
          saveLandApi(this.landForm,sessionStorage.getItem('username')).then(()=>{
            this.getPage()
            this.addDialog = false
          })
        }
      });
    },


    getPage() {
      getLandPage(this.ruleForm,this.pageNum,this.pageSize).then((res) =>{
        console.log(res)
        if(res.code == 200){
          this.tableData = res.data.list
          this.pages = res.data.pages
          this.total = res.data.total
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
        }
      })

    },

    //查询函数
    onSubmit(){
      this.pageNum =1
      this.getPage()
    },

    //直接选择第几页
    changePageNum(v){
      console.log(v+'')
      this.pageNum = v
      this.getPage()
    },

  },
  created() {
    this.getPage()
  }
}

</script>



<style scoped>

.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;

  .section-title {
    color: #606266;
    font-size: 14px;
    margin: 0 0 15px 10px;
    font-weight: 600;
  }
}

.full-width {
  width: 90%;
}



.dialog-footer {
  padding: 15px 20px 0;
  border-top: 1px solid #eee;
  text-align: right;
}

/* 表单行样式 */
.form-row {
  margin-bottom: 15px;
}

/* 表单列样式 */
.form-col {
  margin-bottom: 10px;
  padding: 0 10px;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.form-input {
  width: 100%;
}



/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    padding: 0 5px;
  }

}

.form-actions {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}
</style>